<template>
    <div class="home">
        <div
            :class="container"
        >
            <div
                v-for="item in list"
                :key="item.id"
                :item="item"
                class="item"
                :style="{ width: item.width, height: item.height }"
            >
                {{ item.title }}
            </div>
        </div>

        <Observer
            v-if="list.length !== 0"
            :has-more="total !== list.length"
            :is-loading="isLoading"
            @intersect="loadMore"
        />
    </div>
</template>

<script>
import Macy from './macy';
import Observer from './observer';

export default {
    name: 'Home',

    components: {
        Observer,
    },

    mixins: [Macy],

    data() {
        return {
            list: [],
            total: 100,
            isLoading: false,
        };
    },

    mounted() {
        const { getList } = this;

        getList();
    },

    methods: {
        async getList() {
            this.isLoading = true;

            await this.sleep(1000);

            const list = new Array(30).fill(0).map((_, i) => ({
                id: i,
                title: `元素${i}`,
                width: `${(i + 1) * 10}px`,
                height: `${(i + 1) * 20}px`,
            }));
            this.list.push(...list);

            this.isLoading = false;

            const { initMacy } = this;
            initMacy({
                margin: {
                    x: 24,
                    y: 24,
                },
                breakAt: {
                    1900: {
                        columns: 6,
                    },
                    1650: {
                        columns: 5,
                    },
                    1400: {
                        columns: 4,
                    },
                },
            });
        },

        loadMore() {
            const { getList } = this;

            getList();
        },

        sleep(ts = 1000) {
            return new Promise((resolve) => {
                setTimeout(() => resolve(), ts);
            });
        },
    },
};
</script>

<style lang='scss' scoped>
.home
{
    height: 100vh;
}

.item {
    background-color: #ccc;
}

</style>
